<template>
  <div class="static-wrap curr-main">
    <el-dialog v-model="centerDialogVisible" title="文章内容" width="800px" center :close-on-click-modal="false">
      <div v-html="ruleForm.articleContents"> </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false" type="primary">关 闭</el-button>
          <el-button @click="fullScreen" type="primary">全屏</el-button>
          <el-button @click="exitScreen" type="primary">退出全屏</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'read',
  setup(props, { emit }) {
    const centerDialogVisible = ref(false) //弹窗初始值
    //新增类型参数
    const ruleForm = reactive({
      articleContents: {},
    })

    //父组件调取子组件的方法
    const open = (row: any) => {
      centerDialogVisible.value = true
      ruleForm.articleContents = row
    }
    //全屏
    function fullScreen() {
      var el = document.documentElement
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen

      //typeof rfs != "undefined" && rfs
      if (rfs) {
        rfs.call(el)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    } //退出全屏
    function exitScreen() {
      var el = document
      var cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen

      //typeof cfs != "undefined" && cfs
      if (cfs) {
        cfs.call(el)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    }
    return {
      centerDialogVisible,
      open,
      ruleForm,
      fullScreen,
      exitScreen
    }
  },
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: skyblue;
}
</style>